<template>
    <div class="page">
        <h4>文本框：version 0.1.8文本为空时不显示清空按钮</h4>
        <div class="item">
            <b-input clearable v-model="value1"></b-input>
            <b-input clearable v-model="value2"></b-input>
            <b-input clearable v-model="value3"></b-input>
        </div>
        <h4>密码框:version0.1.8查看密码时输入密码自动切换</h4>
        <div class="item">
            <b-input type="password" show-password v-model="value1"></b-input>
            <b-input type="password" show-password v-model="value2"></b-input>
            <b-input type="password" show-password v-model="value3"></b-input>
        </div>
        <h4>带长度限制的文本框:version0.1.8达到长度时给个回调</h4>
        <div class="item">
            <b-input clearable v-model="value1" :maxlength="10" @inhibiting="handleInhibiting"></b-input>
            <b-input clearable v-model="value2" :maxlength="10" @inhibiting="handleInhibiting"></b-input>
            <b-input clearable v-model="value3" :maxlength="10" @inhibiting="handleInhibiting"></b-input>
        </div>
        <div class="item">
            <b-input v-model="value4" @change="handleChange"></b-input>
        </div>
    </div>
</template>
<script>
export default {
    name:'InputPage',
    data(){
        return{
            value1:'',
            value2:'111',
            value3:'qqwqe',
            value4:'4',
        }
    },
    methods:{
        handleInhibiting(value,size){
            console.log('-');
            this.$Toast.info(`${'达到长度限制,value:'+value+',限制长度：'+size}`,4);
        },
        handleChange(){
               console.log(new Date().getTime());
        }
    }
}
</script>
<style scoped>
.item{
    padding: 10px 0px;
    display: flex;
    justify-content: space-around;
}
</style>